<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>案例展示</title>
    <link rel="stylesheet" href="/css/base.css">
    <link rel="stylesheet" href="/css/select.css">
    <link rel="stylesheet" href="/css/example.css">
    <link rel="stylesheet" href="/css/swiper_me.css">
    <script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>
    <script src="js/jQuery-easing.js" language="javascript" type="text/javascript"></script>
    <script>
        var img_count = 4
    </script>
    <script src="js/jQuery-jcImgScroll.js" language="javascript" type="text/javascript"></script>
    <script>
        function selectCar() {
            var visibility = document.getElementById('select-fixed-car').style.visibility
            if (visibility === 'hidden') {
                document.getElementById('select-fixed-car').style.visibility = 'inherit'
            } else {
                document.getElementById('select-fixed-car').style.visibility = 'hidden'
            }
            // document.getElementById('select-fixed-type').style.visibility = 'hidden'
        }

        function selectType() {
            var visibility = document.getElementById('select-fixed-type').style.visibility
            if (visibility === 'hidden') {
                document.getElementById('select-fixed-type').style.visibility = 'inherit'
            } else {
                document.getElementById('select-fixed-type').style.visibility = 'hidden'
            }
            document.getElementById('select-fixed-car').style.visibility = 'hidden'
        }

        function carClick(name) {
            // document.getElementById('select-car-type').innerHTML = name
            document.getElementById('select-fixed-car').style.visibility = 'hidden'
            // document.getElementById('select-fixed-type').style.visibility = 'inherit'
        }

        function typeClick() {
            document.getElementById('select-fixed-type').style.visibility = 'hidden'
        }
    </script>
</head>
<body>
    <header class="header">
        <script src="/js/s3Slider.js" type="text/javascript"></script>
        <div class="header_top">
            <div class="header_top_content">
                <div class="logo"><img src="/assets/logo.png" width="120"></div>
                <div class="link">
                    <a href="/baojia.html" class="link_cell">
                        <p class="link_name">车型报价</p>
                        <img src="/assets/link_3.png" height="30">
                    </a>
                    <a href="/zhibao.html" class="link_cell">
                        <p class="link_name">质保查询</p>
                        <img src="/assets/link_4.png" height="30">
                    </a>
                    <a href="/example.html" class="link_cell">
                        <p class="link_name">案例展示</p>
                        <img src="/assets/link_2.png" width="30">
                    </a>
                    <a href="/shigong.html" class="link_cell">
                        <p class="link_name">施工指导</p>
                        <img src="/assets/link_1.png" height="30">
                    </a>
                </div>
            </div>
        </div>
        <div class="header_bottom">
            <!-- <img src="/assets/header_bottom.png" width="100%"> -->
            <div id="slider">
                <ul id="sliderContent">
                    <li class="sliderImage">
                    <img src="/assets/header_bottom.png" width="100%">
                    <span class="bottom"></span>
                    </li>
                    <li class="sliderImage">
                    <img src="/assets/header_bottom_1.png" width="100%">
                    <span class="bottom"></span>
                    </li>
                    <div class="clear sliderImage"></div>
                </ul>
            </div>
        </div>
        <script type="text/javascript">
            $(document).ready(function(){
                $('#slider img').first().load(function(e){
                    $('#sliderContent').height(this.height) 
                });
                $('#slider').s3Slider({
                    timeOut: 3000
                });
            });
        </script>
    </header>
    <div class="example">
        <div class="example_content">
            <div class="select">
                <div class="select_active_name">
                    阿斯顿马丁
                </div>
                <div class="select_cell" onclick="selectCar()" style="float: right;">
                    <img src="/assets/car.png" width="24" style="margin-top: 16px;">
                    <span>选择品牌</span>
                    <img src="/assets/car_select.png" class="select_cell_select">
                </div>
                <!-- 选择品牌 -->
                <div class="select_fixed type" id="select-fixed-car" style="visibility: hidden;">
                    <h4 class="select_fixed_title">品牌</h4>
                    <div class="select_fixed_wrap">
                        <div class="select_fixed_cell" onclick="carClick('大众')">
                            <img src="/assets/example_car_mark.png" width="90" height="90">
                            <h4 class="select_fixed_car_name">大众</h4>
                        </div>
                        <div class="select_fixed_cell" onclick="carClick('大众')">
                            <img src="/assets/example_car_mark.png" width="90" height="90">
                            <h4 class="select_fixed_car_name">大众</h4>
                        </div>
                        <div class="select_fixed_cell" onclick="carClick('大众')">
                            <img src="/assets/example_car_mark.png" width="90" height="90">
                            <h4 class="select_fixed_car_name">大众</h4>
                        </div>
                        <div class="select_fixed_cell" onclick="carClick('大众')">
                            <img src="/assets/example_car_mark.png" width="90" height="90">
                            <h4 class="select_fixed_car_name">大众</h4>
                        </div>
                        <div class="select_fixed_cell" onclick="carClick('大众')">
                            <img src="/assets/example_car_mark.png" width="90" height="90">
                            <h4 class="select_fixed_car_name">大众</h4>
                        </div>
                        <div class="select_fixed_cell" onclick="carClick('大众')">
                            <img src="/assets/example_car_mark.png" width="90" height="90">
                            <h4 class="select_fixed_car_name">大众</h4>
                        </div>
                        <div class="select_fixed_cell" onclick="carClick('大众')">
                            <img src="/assets/example_car_mark.png" width="90" height="90">
                            <h4 class="select_fixed_car_name">大众</h4>
                        </div>
                        <div class="select_fixed_cell" onclick="carClick('大众')">
                            <img src="/assets/example_car_mark.png" width="90" height="90">
                            <h4 class="select_fixed_car_name">大众</h4>
                        </div>
                        <div class="select_fixed_cell" onclick="carClick('大众')">
                            <img src="/assets/example_car_mark.png" width="90" height="90">
                            <h4 class="select_fixed_car_name">大众</h4>
                        </div>
                        <div class="select_fixed_cell" onclick="carClick('大众')">
                            <img src="/assets/example_car_mark.png" width="90" height="90">
                            <h4 class="select_fixed_car_name">大众</h4>
                        </div>
                    </div>
                </div>
            </div>
            <div class="example_detail">
                <h4 class="example_detail_car_name">本田讴歌NSX</h4>
                <div id="img-swiper" class="jcImgScroll">
                    <ul>
                        <li><a href="javascript:void(0)" path="/assets/example_detail_car.png"></a></li>
                        <li><a href="javascript:void(0)" path="/assets/example_detail_car.png"></a></li>
                        <li><a href="javascript:void(0)" path="/assets/example_detail_car.png"></a></li>
                        <li><a href="javascript:void(0)" path="/assets/example_detail_car.png"></a></li>
                        <li class="img-swiper-li"><a href="javascript:void(0)" path=""></a></li>
                    </ul>
                </div>
                <div class="example_share">
                    <img src="/assets/example_share.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <footer class="footer">
        <div class="footer-content">
            <div class="footer-phone">
                <img class="footer-phone-icon" src="/assets/footer_phone.png" alt="">
                <p class="footer-phone-name">全国热线</p>
                <p class="footer-phone-number">400-600-2900</p>
            </div>
            <div class="footer-info">
                <p>粤ICP备09064614号    备案编号：11010502002098</p>
                <p>COPYRIGHT (©) 2019 中凌薄膜材料科技（上海）有限公司  版权所有</p>
            </div>
            <div class="footer-qrcode">
                <img src="/assets/footer_qrcode.png">
                <p style="text-align: center; margin-top: 5px;">扫一扫,关注公众号</p>
            </div>
            <div class="footer-logo">
                <img src="/assets/footer_logo.png">
            </div>
        </div>
    </footer>
    <script language="javascript" type="text/javascript">
        $(function(){
            $("#img-swiper").jcImgScroll()
        })
    </script>
</body>
</html>